<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html lang="zh_cn">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>JIM管理系统</title>
<%@ include file="../../../inc/main-css.jsp"%>
<%@ include file="../../../inc/main-js.jsp"%>
<style type="text/css">
	.table th, .table td { 
	text-align: center;
	vertical-align: middle!important;
	}
</style>
<script type="text/javascript">
	$(function(){
		$('#table').bootstrapTable({
			url:'list',
			showColumns:true,
			pagination:true,
			sidePagination:'server',
			pageList:[10, 25, 50, 100],
			onDblClickRow:function(row, $element){
				
			},
		    columns: [
		    {
		        field: 'name',
		        title: '文件名称'
		    },{
		        field: 'description',
		        title: '描述'
		    },{
		        field: 'filepath',
		        title: '文件路径',
		        formatter:function(value,row,index){
		        	return '<a href="download?file='+value+'">'+value+'</a>';
		        }
		    },{
		        field: 'createtime',
		        title: '创建时间'
		    },{
		        title: '操作',
		        formatter:function(value,row,index){
		        
		        
		        	return '<div class="btn-group" role="group" aria-label="...">'
							  +'<button type="button" class="btn btn-default" id="update" onclick="edit('+row.id+',\''+row.name+'\',\''+row.description+'\');">修改</button>'
							  +'<button type="button" class="btn btn-default" id="deleteRec" onclick="deleteRec('+row.id+',\''+row.filepath+'\');">删除</button>'
							+'</div>';
		        }
		    }]
		});
		
		edit = function(id,name,description){
			$("#fileForm").get(0).reset();
			$("#myModal").modal("show");
			
			$("#inputName").val(name);
			$("#inputDescription").val(description);
			$("#id").val(id);
			
			$("#updateBtn").show();
			$("#saveBtn").hide();
			$("#fileDiv").hide();
		}
		
		deleteRec = function(id,filepath){
		
			if(!confirm("是否删除记录？")){
				return false;
			}
		
			$.ajax({
				url:"delete",
				type:"post",
				dataType:"json",
				data:{"id":id,"filepath":filepath},
				success:function(data){
					if(data){
						alert(data.message);
						$('#table').bootstrapTable('refresh');
					}
				}
			});
		}
		
		$("#path").change(function () {
		    $("#docPath").val($(":file").val());
		});
		
		save = function(){
			
			$("#fileForm").get(0).submit();
		}
		
		showModal = function(){
			$("#fileForm").get(0).reset();
			$("#myModal").modal("show");
			
			$("#updateBtn").hide();
			$("#saveBtn").show();
			$("#fileDiv").show();
		}
		
		update = function(){
			$("#fileForm").attr("action","update");
			$("#fileForm").get(0).submit();
		}
		
		search = function(){
			$('#table').bootstrapTable('refresh',{
				query:{
					field:"name",
					fieldVal:$.trim($("#fieldVal").val()),
					type:$("#type").val()
				}
			});
		}
	});//--
	
</script>
</head>
<body>
	<div id="wrapper" class="container-fluid">
		<%@ include file="../../../inc/menu.jsp"%>
		<div id="page-wrapper">
			<form class="form-inline">
				<button type="button" class="btn btn-default" onclick="showModal();">上传文件</button>
				
				<div class="form-group">
						<label for="fieldVal">文件名</label>
						<div class="input-group" style="m">
				    	<input type="text" class="form-control" id="fieldVal">
					  	<span class="input-group-addon btn btn-primary" onclick="search();">搜索</span>
					    </div>
					</div>
			</form>
			
			<table id="table" class="table"></table>
		</div>
			<!-- /.container-fluid -->
	</div>
	
	<!-- Modal -->
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
		  <div class="modal-dialog" role="document">
		    <div class="modal-content">
		      <div class="modal-header">
		        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
		        <h4 class="modal-title" id="myModalLabel">文件上传</h4>
		      </div>
		      <div class="modal-body">
		        <form class="form-horizontal" id="fileForm" action="save" method="post" enctype="multipart/form-data">
		        <input type="hidden" id="id" name="id"/>
				  <div class="form-group">
				    <label for="inputName" class="col-sm-2 control-label">文件名</label>
				    <div class="col-sm-10">
				      <input type="input" class="form-control" id="inputName" name="name" placeholder="文件名">
				    </div>
				  </div>
				  <div class="form-group">
				    <label for="inputDescription" class="col-sm-2 control-label">描述</label>
				    <div class="col-sm-10">
				      <input type="input" name="description" class="form-control" id="inputDescription" placeholder="描述">
				    </div>
				  </div>
				  <div class="form-group" id="fileDiv">
				    <label class="col-sm-2 control-label">选择文件</label>
				    <div class="input-group col-sm-10">
				        <input id="docPath" type="text" class="form-control" >
				        <span id="scan" style="position: relative" class="btn btn-primary input-group-addon">浏览<input id="path" style="width: 60px;height:40px; position: absolute;top:-6px;left: -4px;opacity: 0; filter:alpha(opacity=0)" class="form-control" type="file" name="uploadFile"></span>
				    </div>
				</div>
				</form>
		      </div>
		      <div class="modal-footer">
		        <button type="button" class="btn btn-primary" id="saveBtn" onclick="save();">保存</button>
		        <button type="button" class="btn btn-primary" id="updateBtn" style="display: none;" onclick="update();">更新</button>
		     	<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
		      </div>
		    </div>
		  </div>
		</div>
</body>

</html>